<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <img src="@/assets/dot.png">
        <span class="title">选择转入班级</span>
      </div>
      <div class="content">
        <span>年级：</span>
        <el-select v-model="grade" clearable placeholder="全部" @change="search">
                <el-option
                  v-for="item in gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
          </el-select>
        <span style="margin-left:100px">班级：</span>
        <el-select v-model="classes" clearable placeholder="全部" @change="search">
                <el-option
                  v-for="item in classList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
          </el-select>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <img src="@/assets/dot.png">
        <span class="title">查询学生</span>
      </div>
      <div class="content">
        <el-form :inline="true" @submit.native.prevent>
          <el-form-item >
            <el-input v-model="studentNo" prefix-icon="el-icon-search"  placeholder="请输入查询学生学号" style="width: 500px; text-align: right;" @keyup.enter.native="search">
                  <el-button slot="append"  @click="search">搜索</el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="listLoading"
          :data="searchList"
          border
          fit
          :header-cell-style="{background:'#fafafa', color:'#2A2A2A','text-align':'center'}"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column label="学号" prop="no" />
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="学院" prop="college" />
          <el-table-column label="年级" prop="grade" />
          <el-table-column label="班级名称" prop="class" />
          <el-table-column width="200px" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="handleAdd(scope.row)">加入名单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <img src="@/assets/dot.png">
        <span class="title">确认提交</span>
      </div>
      <div class="content">
        <div class="text" style="text-align:center">已选择学生</div>
        <el-table
          v-loading="listLoading"
          :data="selectList"
          border
          fit
          :header-cell-style="{background:'#fafafa', color:'#2A2A2A','text-align':'center'}"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column label="学号" prop="no" />
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="学院" prop="college" />
          <el-table-column label="年级" prop="grade" />
          <el-table-column label="班级名称" prop="class" />
          <el-table-column width="200px" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index)">移除名单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="desc">将以上学生转入【{{grade}}】【{{classes}}】</div>
        <div class="footer">
          <el-button type="primary" round style="width: 177px;" @click="submitInfo()" >确认转入</el-button>
          <el-button type="default" @click="reset" round style="width: 177px;">重置</el-button>
        </div>
      </div>
    </el-card>

  </div>
</template>
<script>
// import { bannerPage } from '@/api/wikipedia/index'
export default {
  name: 'Carousel',
  data () {
    return {
      listLoading: false,
      studentNo: '',
      searchList: [],
      selectList: [],
      grade: '2021级',
      classes: '2021级1班',
      gradeList: [],
      classList: []
    }
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      this.listLoading = true
      for (var i = 0; i < 5; i++) {
        this.searchList.push({
          no: 10201 + i,
          name: '晓丽' + i,
          college: '经济学院',
          grade: '2022',
          class: '经济学院2022级1班'
        })
      }
      // bannerPage(this.listQuery).then(res => {
      //   this.searchList = res.data.rows
      this.listLoading = false
      // })
    },
    // 加入名单
    handleAdd (row) {
      if (this.isRepetition(row.no)) {
        this.selectList.push(row)
      }
    },
    // 判断是否添加重复
    isRepetition (no) {
      for (var i = 0; i < this.selectList.length; i++) {
        if (no === this.selectList[i].no) {
          this.$message.error('该学生已存在！')
          return false
        }
      }
      return true
    },
    // 移除名单
    handleDelete (index) {
      this.selectList.splice(index, 1)
    },
    // 确认提交
    submitInfo () {
      if (this.grade === '' || this.classes === '') {
        this.$message.error('请选择转入年级和班级！')
      } else if (this.selectList.length === 0) {
        this.$message.error('请选择需要转入的学生！')
      } else {
        this.$message.success('提交成功')
      }
    },
    // 重置
    reset () {
      this.searchList = []
      this.selectList = []
      this.studentNo = ''
      this.grade = ''
      this.classes = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-card__header {
    background: #FAFAFA;
    padding: 12px 20px;
  }
  .el-card__body {
    padding: 35px;
  }
  .el-input-group__append, .el-input-group__prepend {
    background: #0099FF;
    color: #fff;
    border-radius: 0;
    border-color: #0099FF;
  }
}
.box-card{
  margin-bottom: 10px;
}
.title,.desc,.text{
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2A2A2A;
}
.title{
  border-bottom: 2px solid #A60F18;
  padding-bottom: 10px;
  margin: 0 10px;
}
.text{
  font-size: 16px;
  margin-bottom: 20px ;
}
.desc{
  margin-top: 15px;
}
.footer{
  text-align: center;
  margin-top: 80px;
}
</style>
